<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 文本滑过浏览器窗口 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E6%96%87%E6%9C%AC%E6%BB%91%E8%BF%87%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3 -->
    <style>
        p.slidein_1 {
            animation-duration: 3s;
            animation-name: slidein_1;
        }

        @keyframes slidein_1 {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
    </style>

    <!-- 增加关键帧 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E5%A2%9E%E5%8A%A0%E5%85%B3%E9%94%AE%E5%B8%A7 -->
    <style>
        p.slidein_2 {
            animation-duration: 3s;
            animation-name: slidein_2;
        }

        @keyframes slidein_2 {
            from {
                margin-left: 100%;
                width: 300%;
            }

            75% {
                font-size: 300%;
                margin-left: 25%;
                width: 150%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
    </style>

    <!-- 重复动画 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E9%87%8D%E5%A4%8D%E5%8A%A8%E7%94%BB -->
    <style>
        p.slidein_3 {
            animation-duration: 3s;
            animation-name: slidein_3;
            animation-iteration-count: infinite;
        }

        @keyframes slidein_3 {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
    </style>

    <!-- 来回运动 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E6%9D%A5%E5%9B%9E%E8%BF%90%E5%8A%A8 -->
    <style>
        p.slidein_4 {
            animation-duration: 3s;
            animation-name: slidein_4;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes slidein_4 {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
    </style>

    <!-- 赛隆人之眼(赛隆人是一个虚构的生化人种族,出自科幻电视系列剧星际大争霸系列) -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation#cylon_eye -->
    <style>
        .polling_message {
            color: white;
            float: left;
            margin-right: 2%;
        }

        .view_port {
            background-color: black;
            height: 25px;
            width: 100%;
            overflow: hidden;
        }

        .cylon_eye {
            background-color: red;
            background-image: linear-gradient(to right,
                    rgba(0, 0, 0, .9) 25%,
                    rgba(0, 0, 0, .1) 50%,
                    rgba(0, 0, 0, .9) 75%);
            color: white;
            height: 100%;
            width: 20%;

            -webkit-animation: 4s linear 0s infinite alternate move_eye;
            animation: 4s linear 0s infinite alternate move_eye;
        }

        @-webkit-keyframes move_eye {
            from {
                margin-left: -20%;
            }

            to {
                margin-left: 100%;
            }
        }

        @keyframes move_eye {
            from {
                margin-left: -20%;
            }

            to {
                margin-left: 100%;
            }
        }
    </style>

</head>

<body>

    <!-- 文本滑过浏览器窗口 -->
    <p class="slidein_1" style="color: red;">The Caterpillar and Alice looked at each other for some time in silence:
        at last the Caterpillar took the hookah out of its mouth, and addressed
        her in a languid, sleepy voice.</p>
    <!-- 增加关键帧 -->
    <p class="slidein_2" style="color: green;">The Caterpillar and Alice looked at each other for some time in silence:
        at last the Caterpillar took the hookah out of its mouth, and addressed
        her in a languid, sleepy voice.</p>
    <!-- 重复动画 -->
    <p class="slidein_3" style="color: blue;">The Caterpillar and Alice looked at each other for some time in silence:
        at last the Caterpillar took the hookah out of its mouth, and addressed
        her in a languid, sleepy voice.</p>
    <!-- 来回运动 -->
    <p class="slidein_4" style="color: orange;">The Caterpillar and Alice looked at each other for some time in silence:
        at last the Caterpillar took the hookah out of its mouth, and addressed
        her in a languid, sleepy voice.</p>

    <!-- 赛隆人之眼(赛隆人是一个虚构的生化人种族,出自科幻电视系列剧星际大争霸系列) -->
    <div class="view_port">
        <div class="polling_message">
            Listening for dispatches
        </div>
        <div class="cylon_eye"></div>
    </div>

</body>

</html>

<!-- CSS Animations -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations -->
<!-- CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。 -->

<!-- 使用 CSS 动画 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations -->
<!-- CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。 -->
<!-- 配置动画 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E9%85%8D%E7%BD%AE%E5%8A%A8%E7%94%BB -->
<!-- animation-delay -->
<!-- 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。 -->
<!-- animation-direction -->
<!-- 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 -->
<!-- animation-duration -->
<!-- 设置动画一个周期的时长。 -->
<!-- animation-iteration-count -->
<!-- 设置动画重复次数， 可以指定infinite无限次重复动画 -->
<!-- animation-name -->
<!-- 指定由@keyframes描述的关键帧名称。 -->
<!-- animation-play-state -->
<!-- 允许暂停和恢复动画。 -->
<!-- animation-timing-function -->
<!-- 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。 -->
<!-- animation-fill-mode -->
<!-- 指定动画执行前后如何为目标元素应用样式。 -->
<!-- 使用keyframes定义动画序列 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E4%BD%BF%E7%94%A8keyframes%E5%AE%9A%E4%B9%89%E5%8A%A8%E7%94%BB%E5%BA%8F%E5%88%97 -->
<!-- 一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。 -->
<!-- 因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。 -->


<!-- animation-delay -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay -->
<!-- animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。 -->
<!-- 0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度； -->
<!-- 定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。 -->
<!-- 如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。 -->
<!-- <time> -->
<!-- 从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。 -->

<!-- animation-direction -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-direction -->
<!-- animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定 -->
<!-- normal -->
<!-- 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 -->
<!-- alternate -->
<!-- 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 -->
<!-- reverse -->
<!-- 反向运行动画，每周期结束动画由尾到头运行。 -->
<!-- alternate-reverse -->
<!-- 反向交替， 反向开始交替 -->
<!-- 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。 -->

<!-- animation-duration -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-duration -->
<!-- animation-duration属性指定一个动画周期的时长。 -->
<!-- 默认值为0s，表示无动画。 -->
<!-- <time> -->
<!-- 一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。 -->

<!-- animation-iteration-count -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-iteration-count -->
<!-- animation-iteration-count CSS 属性   定义动画在结束前运行的次数 可以是1次 无限循环. -->
<!-- 如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。 -->
<!-- infinite -->
<!-- 无限循环播放动画. -->
<!-- <number> -->
<!-- 动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。 -->

<!-- animation-name -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-name -->
<!-- animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。 -->
<!-- none -->
<!-- 特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。 -->
<!-- IDENT -->
<!-- 标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。 -->

<!-- animation-play-state -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-play-state -->
<!-- animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。 -->
<!-- 恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。 -->
<!-- running -->
<!-- 当前动画正在运行。 -->
<!-- paused -->
<!-- 当前动画已被停止。 -->

<!-- animation-timing-function -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function -->
<!-- CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function> (en-US)。 -->
<!-- 对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。 -->
<!-- 定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。 -->
<!-- <timingfunction> -->
<!-- 每个 <timing-function> (en-US)代表了应用于动画的timing function，定义于animation-property. -->

<!-- animation-fill-mode -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode -->
<!-- CSS 属性 animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。 -->
<!-- none -->
<!-- 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 -->
<!-- forwards -->
<!-- 目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值： -->
<!-- backwards -->
<!-- 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值： -->
<!-- both -->
<!-- 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 -->

<!-- animation -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation -->
<!-- <time> 可能会出现0、1 或 2 次 -->
<!-- 每个动画定义中的属性值的顺序很重要：可以被解析为 <time> 的第一个值被分配给animation-duration， 第二个分配给 animation-delay。 -->
<!-- CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。 -->
<!-- 每个动画定义中的值的顺序，对于区分 animation-name 值与其他关键字也很重要。解析时，对于除 animation-name 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，animation-name 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。 -->
<!-- ❄※❄※❄ 我的理解：animation每组属性的值的顺序不唯一。区分方法是，如果给出的值属于某一种属性，则赋值为该属性的值；对于时间类型，则根据duration和delay的顺序来复制；如果name值和其它的某个属性的值相同，必须同时也写出该属性的默认值。 -->


<!-- 使用keyframes定义动画序列 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E4%BD%BF%E7%94%A8keyframes%E5%AE%9A%E4%B9%89%E5%8A%A8%E7%94%BB%E5%BA%8F%E5%88%97 -->
<!-- 一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。 -->
<!-- 因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。 -->
<!-- 也可包含额外可选的关键帧，描述动画开始和结束之间的状态。 -->

<!-- @keyframes -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes -->
<!-- 关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。 -->
<!-- 要使用关键帧, 先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。 -->
<!-- 可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。 -->
<!-- 让关键帧序列生效 -->
<!-- 如果一个关键帧规则没有指定动画的开始或结束状态（也就是，0%/from 和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。 -->
<!-- 如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。 -->
<!-- 重复定义 -->
<!-- 如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。 -->
<!-- 如果一个@keyframes 内的关键帧的百分比存在重复的情况，则@keyframes规则中该百分比的所有关键帧都将用于该帧。如果多个关键帧指定了相同的百分比值，则@keyframes规则内是可以使用层叠样式的。 -->
<!-- 属性个数不定 -->
<!-- 如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。 -->
<!-- 同一关键帧中的相同属性被重复定义 -->
<!-- 如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。 -->